<template>
  <div class="container" v-if="isClassExist">
    <p class="title">课程提醒</p>
    <p>
      <span>课程名称：{{ roomName }}</span>
      <span>课程主持人：{{ userName }}</span>
      <span>课程号：{{ userId }}</span>
    </p>
    <p>
      <span>课程开始时间：{{ bookTime }}</span>
    </p>
  </div>
  <div class="empty-box" v-if="!isClassExist">
    <div class="box2">
      <el-empty><h5>课程提醒</h5></el-empty>
    </div>
    <!-- <div class="box2"><el-empty><h5>历史会议</h5></el-empty></div> -->
  </div>
</template>

<script setup>
import store from "@/store";
import axios from "axios";
import { inject, onMounted, ref } from "vue";

const bookTime = ref();
const roomName = ref();
const userName = ref();
const userId = ref();
const isClassExist = ref(false);
const address = inject("address");

onMounted(() => {
  axios({
    url: address + "admin/room/getRoomMsg",
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    data: {
      userId: store.state.userData.userId,
    },
  })
    .then((res) => {
      // console.log(res.data)
      const response = res.data.data;
      if (response != null && response.appointTime != 0) {
        bookTime.value = response.appointTime;
        roomName.value = response.className;
        userName.value = store.state.userData.username;
        userId.value = response.classId;
        isClassExist.value = true;
      }
    })
    .catch((error) => {
      console.error(error);
      return;
    });
});
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
}

.container p {
  margin: 0;
  margin-bottom: 1.25rem;
}

.container span {
  margin: 0;
  margin-bottom: 1.25rem;
  font-size: 1.25rem;
  margin-right: 1.25rem;
}

.title {
  font-size: 2.25rem;
  font-weight: bold;
}

div .el-empty {
  padding: 0px;
  width: 30rem;
}
</style>